<!--
 * @Description: 应用卡片列表
 * @Author: Huang Junjie
 * @Date: 2021-06-01 15:33:28
 * @LastEditTime: 2021-10-21 02:44:43
 * @LastEditors: Liu Zhiwang
-->
<template>
  <div class="app-card-list-style">
    <div class="component-inner-div">
      <!-- 四角样式 -->
      <div class="the-four-border the-four-border-01" />
      <div class="the-four-border the-four-border-02" />
      <div class="the-four-border the-four-border-03" />
      <div class="the-four-border the-four-border-04" />
      <!-- 四角样式 -->

      <!-- 列表 -->
      <el-scrollbar>
        <div class="data-list-div">
          <el-row justify="space-between">
            <el-col
              v-for="(item, index) in workBenchDataList"
              :key="`a${index}`"
              class="col-style"
              :span="8"
            >
              <div class="card-div" @click="routeTo(item)">
                <img class="img" :src="require('@/assets/images/jjxt/production-safety/app-bg.png')">
                <div class="content">
                  <img class="img" :src="require('@/assets/images/jjxt/production-safety/app-icon.png')">
                  <div class="text" :title="item.appAttr.appName && item.appAttr.appName.length>6 ? item.appAttr.appName : ''">{{ item.appAttr.appName }}</div>
                </div>
                <i
                  class="el-icon-circle-close-outline close-btn"
                  @click.stop="deleteWorkBenchApp($event, item)"
                />
              </div>
            </el-col>
            <el-col
              class="col-style"
              :span="8"
            >
              <div class="card-div" @click="addWorkbench">
                <img class="img" :src="require('@/assets/images/jjxt/production-safety/app-bg.png')">
                <div class="content">
                  <img class="add-img" :src="require('@/assets/images/jjxt/production-safety/app-add-icon.png')">
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-scrollbar>
      <!-- 列表 -->
    </div>

    <!-- 新增/收藏应用卡片组件 -->
    <workbench v-if="applicationCenter" @close="applicationCenter = false" @renew="getWorkBenchApp" />
    <!-- 新增/收藏应用卡片组件 -->
  </div>
</template>

<script>
import { getWorkBenchApp, deleteWorkBenchApp } from '@/api/jjxt/workBench';
import Workbench from './components/DataAddOrEdit';

export default {
  components: {
    Workbench
  },
  data() {
    return {
      applicationCenter: false, // 应用中心开关

      // 个人工作台信息列表
      workBenchDataList: []
    };
  },
  mounted() {
    this.getWorkBenchApp(); // 查询个人工作台信息列表
  },
  methods: {
    // 查询个人工作台信息列表
    getWorkBenchApp() {
      getWorkBenchApp({ type: 1, platformCode: 'AQSC' }).then(res => {
        this.workBenchDataList = res.data;
      });
    },

    // 跳转应用
    routeTo(item) {
      if (!item.appAttr.appUrlAttrList[0].redirectUri || item.appAttr.appUrlAttrList[0].redirectUri === '/') {
        this.notifiyInfo('此功能在开发中，敬请期待！');
        return;
      }
      var redirectUri = '';
      if (item.appAttr.appUrlAttrList[0].redirectUri.indexOf('/module') !== -1) {
        localStorage.setItem('appId', item.appAttr.id);
        localStorage.setItem('appName', item.appAttr.appName);
        redirectUri = `${item.appAttr.appUrlAttrList[0].redirectUri}`;
      } else {
        redirectUri = item.appAttr.appUrlAttrList[0].redirectUri;
      }
      if (item.appAttr.target === 'iframe') {
        window.location.assign(redirectUri);
      } else {
        window.open(redirectUri);
      }
    },

    // 新增应用卡片
    addWorkbench() {
      this.applicationCenter = true;
    },

    // 删除应用卡片
    deleteWorkBenchApp(e, item) {
      this.confirmBox('确定删除?').then(() => {
        deleteWorkBenchApp(item.id).then(() => {
          this.notifiySuccess('删除成功!');
          this.getWorkBenchApp(); // 查询个人工作台信息列表
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.app-card-list-style {
  position: relative;
  color: white;
  width: 454px;
  box-sizing: border-box;
  overflow: hidden;
  .component-inner-div {
    border: 2px solid #122a57;
    height: 100%;
    background-color: rgba($color: #0a1944, $alpha: 0.9);
    box-sizing: border-box;
    .el-scrollbar {
      position: absolute;
      top: 3px;
      left: 0;
      right: 0;
      bottom: 3px;
      ::v-deep .el-scrollbar__wrap {
        overflow-x: hidden;
      }
    }
    .data-list-div {
      padding: 20px 20px 0 20px;
      .col-style {
        position: relative;
        margin-bottom: 10px;
        text-align: center;
        .card-div {
          .img {
            cursor: pointer;
            width: 90%;
          }
          .content {
            cursor: pointer;
            position: absolute;
            top: 16px;
            left: 0;
            right: 0;
            width: 90%;
            margin: 0 auto;
            text-align: center;
            .img {
              width: 20px;
            }
            .add-img {
              margin: 5px;
              width: 40px;
            }
            .text {
              margin-top: 5px;
              font-size: 14px;
              color: #60c6ff;
              overflow:hidden;
              text-overflow:ellipsis;
              white-space:nowrap;
            }
          }
          .close-btn {
            position: absolute;
            top: 6px;
            right: 13px;
            font-size: 20px;
            cursor: pointer;
            color: rgba($color: #000000, $alpha: 0);
          }
        }
        .card-div:hover {
          .img {
            cursor: pointer;
            width: 90%;
          }
          .content {
            cursor: pointer;
            position: absolute;
            top: 16px;
            left: 0;
            right: 0;
            width: 90%;
            margin: 0 auto;
            text-align: center;
            .img {
              width: 20px;
            }
            .add-img {
              margin: 5px;
              width: 40px;
            }
            .text {
              margin-top: 5px;
              font-size: 14px;
              color: #60c6ff;
            }
          }
          .close-btn {
            position: absolute;
            top: 6px;
            right: 13px;
            font-size: 20px;
            cursor: pointer;
            color: #ffffff;
          }
        }
      }
    }
  }
}
</style>
